<template>
  <div class="action" @contextmenu.prevent="onRightMenu">
    <TwoPart class="action-border">
      <template v-slot:part1>
        <div class="target">
          <i class="iconfont" style="margin-right: 3px;" :class="getTargetIcon()"></i>
          {{ getTargetName() }}
        </div>
      </template>
      <template v-slot:part2>
        <div class="desc">
          {{ getActionName() }}
        </div>
      </template>
    </TwoPart>
  </div>
</template>

<script lang="ts">
import { defineComponent, inject, PropType, toRaw } from 'vue';
import TwoPart from './tow-part.vue';
import { EventAction } from '../../store/events';
import { getTargetIcon, getTargetName } from './tools';
import pluginsStore from '../../store/plugins';
import { Emitter } from '@/ui-kit/index';
import { Msg } from '@/ui-kit/menu';
import { ProvideKey } from '../msg';

export default defineComponent({
  name: 'action',
  components: { TwoPart },
  emits: [],
  props: {
    block: {
      type: String,
      required: true,
      default: '',
    },
    data: {
      type: Object as PropType<EventAction>,
      required: true,
      default: () => {
        return {};
      },
    },
  },
  setup(props, { emit }) {
    const removeBlockAction = inject(ProvideKey.RemoveBlockAction, (block: string, data: EventAction) => {});
    return {
      onRightMenu(event: MouseEvent) {
        Emitter.emit(Msg.ShowMenu, event, [
          {
            name: '删除',
            callback: () => {
              removeBlockAction(props.block, toRaw(props.data));
            },
          },
        ]);
      },
      getTargetIcon() {
        return getTargetIcon((props.data as EventAction).target);
      },
      getTargetName() {
        const target = (props.data as EventAction).target;
        return getTargetName(target);
      },
      getActionName() {
        const { target, action } = (props.data as EventAction);
        if (action) {
          const [bundleID, actionID] = action.split(':');
          const obj: sail.GameObject | null = pluginsStore().getObjectByID(bundleID);
          if (obj) {
            const ret = obj.ace?.actions?.find(el => el.id === actionID);
            if (ret) {
              return ret.name;
            } else {
              console.warn('数据异常');
            }
          } else {
            console.warn('数据异常');
          }
        }
        return '';
      },
    };
  },
});
</script>
<style scoped lang="scss">
.action {
  .action-border {
    border: none;
    border-bottom: 1px solid #bfcce0;

    .target {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: center;
    }

    .desc {
      box-sizing: border-box;
      padding: 0 5px;
      background-color: #f5f8ff;
      text-align: left;
      width: 100%;
    }
  }

}
</style>
